<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="first">
          <div class="btn">
            <el-button type="primary" size="medium" @click="showDialog = true">新增角色</el-button>
          </div>
          <!-- 利用tableList组件渲染表格数据 -->
          <tableList ref="tableList" @editPeople="editPeople" />
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <!-- 利用company子组件渲染公司信息 -->
          <company />
        </el-tab-pane>
      </el-tabs>

      <!-- 弹出层 -->
      <addData ref="addData" :show-dialog.sync="showDialog" :form="form" @yesAdd="yesAdd" />
    </div>
  </div>
</template>

<script>
import company from './components/company.vue'
import tableList from './components/tableList'
import addData from './components/addData.vue'
export default {
  components: {
    company,
    tableList,
    addData
  },
  data() {
    return {
      // tab栏切换
      activeName: 'first',
      showDialog: false,
      rules: {
        name: [{ trigger: 'blur', message: '角色名称不能为空', required: true }]
      },
      form: {
        name: '',
        description: ''
      }
    }
  },
  methods: {
    // 子级返回确认提交新增信息--这里关闭弹窗并刷新表格角色信息
    yesAdd(n) {
      this.showDialog = false
      if (n === 1) {
        this.$message.success('更新角色成功!')
      } else {
        this.$message.success('添加角色成功!')
      }
      this.$refs.tableList.getPeopleList()
    },
    // 根据子组件传来的id获取角色信息并传给弹窗组件
    editPeople(id) {
      this.$refs.addData.getPeople(id) // 把获取的信息传给子组件
      this.showDialog = true
    }
  }
}
</script>

<style scoped>
.btn{
  margin-bottom: 30px;
}
</style>
